<template lang="">
    <div>
        <van-nav-bar title="签约详情" left-arrow>
        <template #right>
            <div style="color:#49B9AD">查看协议</div>
        </template>
</van-nav-bar>

<div style="background: #F5F7FB;">
    <div class="item-tab">
        <div class="item-title">居民信息</div>
        <div class="item">
            <div class="item-left">真实姓名</div>
            <div class="item-right">王紫嫣</div>
        </div>
        <div class="item">
            <div class="item-left">身份证号</div>
            <div class="item-right">524895123548752336</div>
        </div>
        <div class="item">
            <div class="item-left">性别</div>
            <div class="item-right">女</div>
        </div>
        <div class="item">
            <div class="item-left">年龄</div>
            <div class="item-right">23</div>
        </div>
        <div class="item">
            <div class="item-left">联系电话</div>
            <div class="item-right">13800013800</div>
        </div>
        <div class="item">
            <div class="item-left">现居住地</div>
            <div class="item-right">南海区常青路58号2栋23楼2356室</div>
        </div>
    </div>

    <div class="item-tab">
        <div class="item-title">签约信息</div>
        <div class="item">
            <div class="item-left">签约状态</div>
            <div class="item-right">待审核</div>
        </div>
        <div class="item">
            <div class="item-left">签约机构</div>
            <div class="item-right">桂雅卫生服务站</div>
        </div>
        <div class="item">
            <div class="item-left">签约医生</div>
            <div class="item-right">阳广兰</div>
        </div>
        <div class="item">
            <div class="item-left">服务包</div>
            <div class="item-right">健康体验包</div>
        </div>
        <div class="item">
            <div class="item-left">签约周期</div>
            <div class="item-right">2年</div>
        </div>
        <div class="item">
            <div class="item-left">现居住地</div>
            <div class="item-right">南海区常青路58号2栋23楼2356室</div>
        </div>
        <div class="item">
            <div class="item-left">费用</div>
            <div class="item-right" style="color:red">￥200</div>
        </div>
        <div class="item">
            <div class="item-left">申请时间</div>
            <div class="item-right">2022-5-26 10:20:30</div>
        </div>
    </div>

    <div class="item-tab">
        <div class="item-title">签约备注</div>
        <div class="item-mark">
            无
        </div>
    </div>

    <div class="btn-group">
        <van-button class="btn return-btn">驳回</van-button>
        <van-button class="btn add-btn">审核通过</van-button>
    </div>
</div>

<!-- 分类 -->
<van-popup v-model:show="isShowBirthday" :style="{ height: '80vh',width:'90vw' }">
    <van-date-picker @confirm="setDate" v-model="currentDate" :min-date="minDate" :max-date="maxDate" required
        title="生日" />
</van-popup>
</div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        const currentDate = ref(['2021', '01', '01']);

        const item = reactive({
            org: "",
            team: "",
            doc: "",
            fuwu: "",
            zhouqi: "",
            money: "",
            mark: "",
        })

        const isShowBirthday = ref(false)
        const toggleBirthday = () => {
            isShowBirthday.value = !isShowBirthday.value
        }

        const setDate = e => {
            item.birthday = currentDate.value.join("-")
            isShowBirthday.value = !isShowBirthday.value
        }

        const saveItem = () => {
            router.push('/QianYueCreate')
        }
        return {
            item,
            isShowBirthday,
            toggleBirthday,
            setDate,
            currentDate,
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(),
            saveItem
        }
    }
}
</script>
<style scoped>
.item-tab {
    background: #FFFFFF;
    margin-bottom: 10px;
}

.item-title {
    padding: 15px;
    font-size: 20px
}

.item {
    padding: 15px;
    border-bottom: solid 1px #E3E4E5;

    display: flex;
    flex-direction: row;
}

.item-left {
    width: 25vw;
}

.item-mark {
    margin: 15px;
    padding: 10px;
    background: #F5F7FB;
    height: 15vh;
}

.btn-group{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.btn-group{
    padding: 15px;
}
.btn{
    border-radius: 8px;
    width: 40vw;
    text-align: center;
    padding: 12px 8px;
}
.add-btn {
    background: #49B9AD;
    color: #FFFFFF;
}
.return-btn{
    background: #FFFFFF;
    color: #F65755;
}
</style>